<template>
	<!--新增、编辑页面-->
	<scroll-view class="page-content" :scroll-top="scrollTop" scroll-y="true">
		<view class="page-body">
			<view class="input-row">
				<view class="input-row-t">流程名称：</view>
				<input class="input-row-w" type="text" v-model="params.name" placeholder="请输入流程名称"
					placeholder-style="color:#ddd"></input>
			</view>
			<view class="del-row">
				<text class="del-row-t">环节设置：</text>
			</view>

			<!--流程-->
			<view class="flow-box">
				<view class="box-add-icon" @click="addpost('start')"
					v-if="lists.company_start && lists.company_start.length>0">+</view>
				<view class="box-line" v-if="lists.company_start && lists.company_start.length>0"></view>
				<view class="box" v-if="lists.company_start && lists.company_start.length>0">
					<block v-for="(item,index) in lists.company_start" :key="index">
						<view class="box-add">
							<!--增加审批岗位 item.id-为岗位id-->
							<view class="box-add-li" @longpress="todelete(item.id)">
								<view class="box-add-li-l">
									<view class="box-add-li-l-tit">审批岗位</view>
									<view class="box-add-li-l-name">{{item.name}}</view>
								</view>
								<view class="box-add-li-r">
									<image class="box-add-li-r-icon" :src="$mAssetsPath.icon_bianji"
										@click.stop="toedit(item.id)"></image>
									<image class="box-add-li-r-icon" :src="$mAssetsPath.icon_shanchu"
										@click.stop="todelete(index,'start','one')"></image>
									<image class="box-add-li-r-icon" :src="$mAssetsPath.icon_chao"
										@click.stop="tolink(index,'start')"></image>
								</view>
							</view>
							<!--增加审批人-->
							<template v-if="item.list && item.list.length>0">
								<block v-for="(ite,ii) in item.list" :key="ii">
									<view class="box-add-li2">
										<view class="box-add-li-l">
											<view class="box-add-li-l-tit">抄送人</view>
											<view class="box-add-li-l-name">{{ite.nickname || ite.name}}<text
													v-if="ite.role_name!=null"
													class="box-add-li-l-post">{{ite.role_name}}</text></view>
										</view>
										<view class="box-add-li-r">
											<image class="box-add-li-r-icon" @click.stop="todelete2(index,ii,'start','two')"
												:src="$mAssetsPath.icon_shanchu"></image>
										</view>
									</view>
								</block>
							</template>
						</view>
						<view class="box-line"></view>
					</block>
				</view>
				<view class="box-add-icon" @click="addpost('start')">+</view>
				<view class="box-line"></view>

				<view class="box-tit">选择供应商</view>

				<view class="box-line"></view>
				<view class="box-add-icon" @click="addpost('end')">+</view>
				<view class="box-line" v-if="lists.company_end && lists.company_end.length>0"></view>

				<view class="box" v-if="lists.company_end && lists.company_end.length>0">
					<block v-for="(item,iii) in lists.company_end" :key="iii">
						<view class="box-add">
							<!--增加审批岗位 item.id-为岗位id-->
							<view class="box-add-li" @longpress="todelete(item.id)">
								<view class="box-add-li-l">
									<view class="box-add-li-l-tit">审批岗位</view>
									<view class="box-add-li-l-name">{{item.name}}</view>
								</view>
								<view class="box-add-li-r">
									<image class="box-add-li-r-icon" :src="$mAssetsPath.icon_bianji"
										@click.stop="toedit(iii,'end')"></image>
									<image class="box-add-li-r-icon" :src="$mAssetsPath.icon_shanchu"
										@click.stop="todelete(iii,'end','one')"></image>
									<image class="box-add-li-r-icon" :src="$mAssetsPath.icon_chao"
										@click.stop="tolink(iii,'end')"></image>
								</view>
							</view>
							<!--增加审批人-->
							<template v-if="item.list && item.list.length>0">
								<block v-for="(ite,i) in item.list" :key="i">
									<view class="box-add-li2">
										<view class="box-add-li-l">
											<view class="box-add-li-l-tit">抄送人</view>
											<view class="box-add-li-l-name">{{ite.nickname || ite.name}}<text
													v-if="ite.role_name!=null"
													class="box-add-li-l-post">{{ite.role_name}}</text></view>
										</view>
										<view class="box-add-li-r">
											<image class="box-add-li-r-icon" @click.stop="todelete2(iii,i,'end','two')"
												:src="$mAssetsPath.icon_shanchu"></image>
										</view>
									</view>
								</block>
							</template>
						</view>
						<view class="box-line"></view>
					</block>
				</view>
				<view class="box-add-icon" @click="addpost('end')"
					v-if="lists.company_end && lists.company_end.length>0">+</view>
			</view>

		</view>
		<view class="page-foot">
			<text class="submit" @click="confirm1">确认</text>
		</view>
		<!-- 下拉框 -->
		<u-popup class="popup-content" mode='bottom' border-radius="16" v-model="show">
			<view class="header">
				<view class="title">{{poptype==='1'?'设置一级关联：':poptype==='2'?'设置二级关联：':'选择岗位'}}</view>
			</view>
			<scroll-view class="body" scroll-y="true">
				<block v-for="(item,index) in list2" :key="index">
					<view class="box" @click="checks(item.id,item.checked)">
						<view class="box-name" :style="{color:item.checked?'#198FFF':'#999'}">{{item.name}}</view>
						<view class="box-icon">
							<image class="box-icon-dagou" v-if="item.checked" :src="$mAssetsPath.icon_dagou"></image>
						</view>
					</view>
				</block>
			</scroll-view>
			<view @tap="cancel" hover-class="none" class="footer">取消</view>
		</u-popup>
		<!--弹窗-->
		<w-popup :show="showtip" :type="type1" @change="change1">
			<view class="w-tip">
				<view class="w-con">
					<view class="txt-row">是否确认删除？</view>
				</view>
				<view class="w-but">
					<view class="w-but-txt" @click="cancel('tip')">取消</view>
					<view class="w-but-txt" @click="confirm">确认</view>
				</view>
			</view>
		</w-popup>
	</scroll-view>
</template>

<script>
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	import wPopup from '@/components/w-popup/w-popup2.vue'; // 弹窗
	import {
		mapGetters,
		mapActions
	} from "vuex";
	import {
		getRoleLists,
		addFlowPaths,
		getFlowPathJsons,
		editFlowPaths
	} from '@/common/api.js';
	export default {
		components: {
			uniIcons,
			wPopup
		},
		data() {
			return {
				scrollTop: 0,
				lists: {
					company_start: [],
					company_end: []
				},
				//下拉框数据
				list2: [],
				params: {
					id: 0,
					name: '',
					statu: false
				},
				pageType: 'add', //页面类型 add-增加 edit-编辑
				addressData: {},
				formName: '',

				showtip: false, //是否显示弹窗2
				content1: '顶部弹 popup',
				type1: '', //弹窗显示方式

				show: false, //弹窗
				poptype: 1, //弹窗类型
				id: 0,
				formdata: {
					company_id: '',
					title: '',
					json: '',
					id:''
				},
				json: {
					company_start: [],
					company_end: []
				},
				getjson:{
					id:'',
					company_id: '',
				},
				flowTypes:{
					index:0,
					ind:0,
					flowType:'',
					num:''
				},
			}
		},
		computed: {
			...mapGetters(['companyInfo', 'userInfo']),
		},
		onShow() {
			/* uni.$on('callback', (e, id, list) => {
				console.log(2222, e, id, list)
				if (e === 'flow_contactAdd') {
					this.lists.forEach(item => {
						if (item.id === parseInt(id)) {
							this.$set(item, 'list', list)
						}
					})
				}
			}) */
		},
		onLoad(option) {
			console.log(222, option)
			this.formdata.company_id = this.companyInfo.id;
			this.getPostList();
			if (option.pageType) {
				if (option.pageType === 'edit') {
					// 导航栏多语言
					uni.setNavigationBarTitle({
						title: '编辑流程'
					});
				}
				if(option.id){
					this.getjson.company_id = this.companyInfo.id;
					this.getjson.id = option.id;
					this.formdata.id = option.id;
					this.getjsondata()
				}
				this.pageType = option.pageType
			}
			if (option.name) {
				this.params.id = option.id;
				this.params.name = option.name;
				this.params.statu = option.statu;
			}
		},
		methods: {
			getjsondata(){
				getFlowPathJsons(this.getjson).then(res=>{
					if(res.code === 2000){
						if(res.data.company_start && res.data.company_start.length>0){
							res.data.company_start.forEach(item=>{
								this.$set(item,'list',item.copy_id)
								this.$set(item,'id',item.role_id.id)
								this.$set(item,'name',item.role_id.name)
							})
						}
						if(res.data.company_end && res.data.company_end.length>0){
							res.data.company_end.forEach(item=>{
								this.$set(item,'list',item.copy_id)
								this.$set(item,'id',item.role_id.id)
								this.$set(item,'name',item.role_id.name)
							})
						}
						this.lists = res.data
						console.log(2222,this.lists)
					}
				})
			},
			resdata(flowType, role_id, sel_list) {
				console.log(111111, flowType, role_id, sel_list)
				console.log(111112, this.lists)

				if (flowType === 'start') {
					//审批岗位-加审批人
					if (this.lists.company_start && this.lists.company_start.length > 0) {
						this.lists.company_start.forEach((item, ind) => {
							if (ind === parseInt(role_id)) {
								item.list = sel_list
							}
						})
					}
					console.log(2222222, this.lists)
				} else if (flowType === 'end') {
					//审批岗位-加审批人
					if (this.lists.company_end && this.lists.company_end.length > 0) {
						this.lists.company_end.forEach((item, ind) => {
							if (ind === parseInt(role_id)) {
								item.list = sel_list
							}
						})
					}

				}
			},
			//岗位编辑
			toedit() {

			},
			//岗位删除
			todelete(index, type, num) {
				this.showtip = true;
				this.content1 = 'center';
				this.type1 = 'center';
				this.flowTypes.flowType = type;
				this.flowTypes.index = index;
				this.flowTypes.num = num;
				
			},
			//人员删除
			todelete2(index,ind, type, num) {
				this.showtip = true;
				this.content1 = 'center';
				this.type1 = 'center';
				this.flowTypes.flowType = type;
				this.flowTypes.index = index;
				this.flowTypes.ind = ind;
				this.flowTypes.num = num;
				
			},
			//增加抄送人
			tolink(role_id, flowType) {
				uni.navigateTo({
					url: `/pages/contact/contactAdd?pageType=flow&role_id=${role_id}&flowType=${flowType}`
				})

			},
			//获取数据-岗位列表
			getPostList() {
				getRoleLists(this.formdata).then(res => {
					if (res.code === 2000) {
						this.list2 = res.data;
						if (this.list2 && this.list2.length > 0) {
							this.list2.forEach(item => {
								this.$set(item, 'checked', false)
							})
						}
					}
				})
			},
			//底部弹窗
			addpost(type) {
				this.show = true;
				this.flowType = type;
				if (this.list2 && this.list2.length > 0) {
					this.list2.forEach(item => {
						this.$set(item, 'checked', false)
					})
				}
			},
			//选择岗位
			checks(id, checked) {
				if (this.flowType === 'start') {
					let list = {
						name: '',
						id: '',
						list: []
					}
					if (this.list2 && this.list2.length > 0) {
						this.list2.forEach(item => {
							if (item.id === id) {
								item.checked = true;
								list.name = item.name;
								list.id = item.id;
							} else {
								item.checked = false;
							}
						})
					}
					this.show = false;
					this.lists.company_start.push(list)
				} else if (this.flowType === 'end') {
					let list = {
						name: '',
						id: '',
						list: []
					}
					if (this.list2 && this.list2.length > 0) {
						this.list2.forEach(item => {
							if (item.id === id) {
								item.checked = !checked;
								list.name = item.name;
								list.id = item.id;
							} else {
								item.checked = false;
							}
						})
					}
					this.show = false;
					this.lists.company_end.push(list)
				}
				console.log(333, this.lists)
			},
			//弹窗确定
			confirm() {
				if(this.flowTypes.flowType === 'start'){
					
					if(this.flowTypes.num === 'one'){
						let company_start = this.lists.company_start;
						delete company_start[this.flowTypes.index]; //删除数组的对象
						this.lists.company_start = company_start.filter(Boolean); //删除数组的对象
					}else if(this.flowTypes.num === 'two'){
						let company_start = this.lists.company_start[this.flowTypes.index];
						delete company_start.list[this.flowTypes.ind]; //删除数组的对象
						this.lists.company_start[this.flowTypes.index].list = company_start.list.filter(Boolean); //删除数组的对象
					}
					
				}else if(this.flowTypes.flowType === 'end'){
					if(this.flowTypes.num === 'one'){
						let company_end= this.lists.company_end;
						delete company_end[this.flowTypes.index]; //删除数组的对象
						this.lists.company_end = company_end.filter(Boolean); //删除数组的对象
					}else if(this.flowTypes.num === 'two'){
						let company_end = this.lists.company_end[this.flowTypes.index];
						delete company_end.list[this.flowTypes.ind]; //删除数组的对象
						this.lists.company_end[this.flowTypes.index].list = company_end.list.filter(Boolean); //删除数组的对象
					}
				}
				console.log(4444,this.lists.company_start)
				this.showtip = false;
			},
			//提交
			confirm1() {
				console.log(666666, this.json)
				console.log(777777, this.lists)
				this.formdata.title = this.params.name;
				if (this.lists.company_start && this.lists.company_start.length > 0) {
					this.lists.company_start.forEach(item => {
						let company_start = {
							role_id: '',
							copy_id: []
						}
						company_start.role_id = item.id
						if (item.list && item.list.length > 0) {
							item.list.forEach(item2 => {
								company_start.copy_id.push(item2.id)
							})
						}
						this.json.company_start.push(company_start)
					})
				}
				if (this.lists.company_end && this.lists.company_end.length > 0) {
					this.lists.company_end.forEach(item => {
						let company_end = {
							role_id: '',
							copy_id: []
						}
						company_end.role_id = item.id
						if (item.list && item.list.length > 0) {
							item.list.forEach(item2 => {
								company_end.copy_id.push(item2.id)
							})
						}
						this.json.company_end.push(company_end)
					})
				}
				this.formdata.json = JSON.stringify(this.json)
				console.log(888888, this.formdata)
				if(this.pageType === 'add'){
					addFlowPaths(this.formdata).then(res => {
						if (res.code === 2000) {
							uni.showToast({
								title: '添加成功！',
								icon: 'none',
								duration: 2000
							})
							this.$util.prePage().resdata2();
							setTimeout(() => {
								uni.navigateBack()
							}, 800)
						}
					})
				}else if(this.pageType === 'edit'){
					editFlowPaths(this.formdata).then(res => {
						if (res.code === 2000) {
							uni.showToast({
								title: '编辑成功！',
								icon: 'none',
								duration: 2000
							})
							this.$util.prePage().resdata2();
							setTimeout(() => {
								uni.navigateBack()
							}, 800)
						}
					})
				}
				
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			//取消
			cancel(){
				this.show = false
				this.showtip = false
			},
			change1(e) {
				if (!e.show) {
					this.showtip = false
				}
			},
		}
	}
</script>

<style lang="scss">
	/* 提示窗口 */
	.w-tip {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: column;
		/* #endif */
		width: 70vw;
		border-radius: 10rpx;
		background-color: #fff;
		box-shadow: 0rpx 7rpx 7rpx 0rpx rgba(0, 0, 0, 0.1);
		margin: 30rpx auto 0;

		.w-tit {
			font-size: 36rpx;
			font-weight: bold;
			color: $font-color-3;
			line-height: 60rpx;
			height: 60rpx;
			margin-top: 20rpx;
			text-align: center;
		}

		.w-but {
			display: flex;
			font-size: 32rpx;
			font-weight: 400;
			color: $font-color-b3;
			height: 84rpx;
			line-height: 84rpx;

			.w-but-txt {
				flex: 1;
				text-align: center;
				border-right: 1rpx solid #f5f5f5;
			}

			.w-but-txt:last-of-type {
				border-right: none;
			}
		}

		.w-con {
			display: flex;
			text-align: center;
			font-weight: 400;
			padding: 40rpx 30rpx;
			border-bottom: 1rpx solid #f5f5f5;

			.txt-row {
				width: 100%;
				text-align: center;
				font-size: 28rpx;
				color: $font-color-9;
			}
		}
	}

	/* 下拉窗口 */
	.popup-content {
		display: flex;
		flex-direction: column;

		.header {
			display: flex;
			border-bottom: 1rpx solid #eee;
			height: 100rpx;

			.title {
				line-height: 100rpx;
				padding: 0 30rpx;
				text-align: left;
				font-size: 32rpx;
				color: #333;
				font-weight: bold;
			}
		}

		.body {
			display: flex;
			max-height: 700rpx;
			flex-direction: column;

			.box {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100rpx;
				border-bottom: 1rpx solid #eee;
				font-size: 36rpx;

				.box-name {
					margin-right: 30rpx;
				}

				.box-icon {
					width: 34rpx;

					.box-icon-dagou {
						width: 34rpx;
						height: 28rpx;
					}
				}
			}
		}

		.footer {
			height: 100rpx;
			color: $font-color-r;
			font-size: 36rpx;
			text-align: center;
			line-height: 88rpx;
			background: $uni-bg-color;
			margin-right: 50rpx;
		}
	}

	.flow-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding-top: 120rpx;

		.box-add-icon {
			width: 40rpx;
			height: 40rpx;
			border-radius: 20rpx;
			background: $uni-but-bg-color;
			line-height: 38rpx;
			color: $font-color-w;
			text-align: center;
			font-size: 38rpx;
		}

		.box-line {
			width: 1rpx;
			height: 76rpx;
			background: $uni-but-bg-color-d;
		}

		.box-tit {
			height: 120rpx;
			width: 100%;
			background: $uni-bg-color;
			border-radius: 10rpx;
			font-size: 32rpx;
			font-weight: 400;
			line-height: 120rpx;
			color: $font-color-3;
			text-align: center;
		}

		.box {
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}

		.box-add {
			display: flex;
			flex-direction: column;
			width: 100%;
			background: $uni-bg-color;
			border-radius: 10rpx;
			overflow: hidden;

			.box-add-li2 {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				padding: 40rpx;
				border-top: 1rpx solid #f5f5f5;

				.box-add-li-l {
					display: flex;
					align-items: center;
					width: calc(100% - 70rpx);

					.box-add-li-l-tit {
						width: 130rpx;
						font-size: 32rpx;
						font-weight: 400;
						color: $font-color-9;
						margin-right: 40rpx;
					}

					.box-add-li-l-name {
						font-size: 32rpx;
						font-weight: 400;
						color: $font-color-3;

						.box-add-li-l-post {
							height: 30rpx;
							border-radius: 4rpx;
							border: 1rpx solid #198FFF;
							font-size: 22rpx;
							color: $font-color-b3;
							margin-left: 30rpx;
							padding: 0 10rpx;
						}
					}
				}

				.box-add-li-r {
					display: flex;
					align-items: center;
					width: 70rpx;

					.box-add-li-r-icon {
						width: 40rpx;
						height: 40rpx;
						margin-left: 30rpx;
					}
				}
			}

			.box-add-li {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				padding: 40rpx;

				.box-add-li-l {
					display: flex;
					align-items: center;
					width: calc(100% - 210rpx);

					.box-add-li-l-tit {
						width: 130rpx;
						font-size: 32rpx;
						font-weight: 400;
						color: $font-color-9;
						margin-right: 40rpx;
					}

					.box-add-li-l-name {
						font-size: 32rpx;
						font-weight: 400;
						color: $font-color-3;
					}
				}

				.box-add-li-r {
					display: flex;
					align-items: center;
					width: 210rpx;

					.box-add-li-r-icon {
						width: 40rpx;
						height: 40rpx;
						margin-left: 30rpx;
					}
				}
			}
		}
	}

	.page-content {
		width: 100vw;
		display: flex;
		flex-direction: column;
		height: 100%;
		background: $uni-bg-color-grey;

		.page-foot {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			height: 100rpx;
			line-height: 100rpx;
			background: $uni-but-bg-color;
			font-size: 36rpx;
			font-weight: 400;
			text-align: center;
			color: $font-color-w;
		}

		.page-body {
			display: flex;
			flex-direction: column;
			padding: 0 30rpx 200rpx 30rpx;

			.default-row {
				display: flex;
				flex-direction: row-reverse;
				align-items: center;

				.default-row-t {
					font-size: 16px;
					font-weight: 400;
					color: $font-color-3;
				}
			}

			.del-row {
				display: flex;
				flex-direction: column;
				margin-bottom: 20rpx;

				.del-row-t {
					display: flex;
					height: 100rpx;
					line-height: 100rpx;
					font-size: 32rpx;
					color: $font-color-3;
				}
			}

			.input-row {
				height: 100rpx;
				display: flex;
				align-items: center;
				width: 100%;
				flex-direction: row;
				border-bottom: 1rpx solid #f5f5f5;

				.row-sel-box {
					width: 100%;
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.sel_name {
						font-size: 32rpx;
						font-weight: 400;
					}

					.icons {
						color: $font-color-9;
					}
				}

				.input-row-w {
					display: flex;
					flex: 1;
					width: 100%;
					padding-left: 0rpx;
					height: 80rpx;
					color: $font-color-3;
					font-size: 28rpx;
					border: none;
				}

				.input-row-t {
					font-size: 32rpx;
					color: $font-color-3;
				}
			}
		}
	}
</style>
